<template>
	<div class="j-groupbranch">
		<div class="container">
			<div class="module-title text-center">
				<span class="title-ch">集团分支机构</span><br>
				<span class="title-en">GROUP BRANCH</span>
			</div>
			<swiper :options="swiperOption" class="gb-swiper">
				<!--<swiper-slide class="swiper-slide-list add_list_ii" v-for="(item,index) in branchList" :key="index">-->
					<!--<div class="gb-box" @click="findGroupBranch(index)">-->
						<!--<div class="gb-img">-->
							<!--<img :src="item.image">-->
							<!--<div class="gb-mask"></div>-->
						<!--</div>-->
						<!--<div class="gb-text">上海市脐带血造血干细胞库<br>上海市脐带血造血干细胞库</div>-->
					<!--</div>-->
				<!--</swiper-slide>-->
				<swiper-slide class="swiper-slide-list add_list_ii">
						<div class="gb-box" @click="findGroupBranch(1)">
							<div class="gb-img">
								<img src="../../assets/icon/gb01.jpg">
								<div class="gb-mask"></div>
							</div>
							<div class="gb-text">上海市干细胞技术有限公司<br>上海市脐带血造血干细胞库</div>
						</div>
				</swiper-slide>
				<swiper-slide class="swiper-slide-list add_list_ii">
					<div class="gb-box" @click="findGroupBranch(2)">
						<div class="gb-img">
							<img src="../../assets/icon/gb02.jpg">
							<div class="gb-mask"></div>
						</div>
						<div class="gb-text">重庆市干细胞技术有限公司<br>重庆市脐带血造血干细胞库(筹)</div>
					</div>
				</swiper-slide>
				<swiper-slide class="swiper-slide-list add_list_ii">
					<div class="gb-box" @click="findGroupBranch(3)">
						<div class="gb-img">
							<img src="../../assets/icon/gb03.jpg">
							<div class="gb-mask"></div>
						</div>
						<div class="gb-text">陕西省干细胞技术有限公司<br>陕西省干细胞库</div>
					</div>
				</swiper-slide>
				<swiper-slide class="swiper-slide-list add_list_ii">
					<div class="gb-box" @click="findGroupBranch(4)">
						<div class="gb-img">
							<img src="../../assets/icon/gb04.jpg">
							<div class="gb-mask"></div>
						</div>
						<div class="gb-text">苏州市干细胞技术有限公司<br>苏州市干细胞库</div>
					</div>
				</swiper-slide>
				<swiper-slide class="swiper-slide-list add_list_ii">
					<div class="gb-box" @click="findGroupBranch(5)">
						<div class="gb-img">
							<img src="../../assets/icon/gb05.jpg">
							<div class="gb-mask"></div>
						</div>
						<div class="gb-text">三亚市干细胞技术有限公司<br>三亚市干细胞库</div>
					</div>
				</swiper-slide>
				<swiper-slide class="swiper-slide-list add_list_ii">
					<div class="gb-box" @click="findGroupBranch(6)">
						<div class="gb-img">
							<img src="../../assets/icon/gb06.jpg">
							<div class="gb-mask"></div>
						</div>
						<div class="gb-text">香港干细胞技术有限公司<br>香港脐带血库有限公司</div>
					</div>
				</swiper-slide>
				<swiper-slide class="swiper-slide-list add_list_ii">
					<div class="gb-box" @click="findGroupBranch(7)">
						<div class="gb-img">
							<img src="../../assets/icon/gb07.jpg">
							<div class="gb-mask"></div>
						</div>
						<div class="gb-text">中国干细胞集团海南博鳌附属干细胞医院<br>上海交通大学医学院附属同仁医院博鳌分院</div>
					</div>
				</swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
			<div class="gb-content-box" v-show="isContent">
				<div class="gb-content-info">
					<div class="colse">
						<img src="../../assets/close.png" @click="close">
					</div>
					<div class="gb-text">
						<div class="gb-text-up clearfix">
							<div class="gb-img pull-left">
								<img :src="gImg">
							</div>
							<div class="gb-info pull-right">
								<p class="gb-suptt">{{ gName }}</p>
								<p class="gb-subtt">{{ gSubName }}</p>
								<p class="gb-address"><b>地址：</b>{{ gAddress }}</p>
								<p class="gb-tel"><b>电话：</b>{{ gTel }}</p>
								<p class="gb-fax"><b>传真：</b>{{ gFax }}</p>
							</div>
						</div>
						<div class="gb-text-down">
							<hr>
							<p>{{ bText }}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { groupList } from '../../datas/group.json'
import api from '../../service/api'
export default {
  name: 'carrousel',
  components: {
    groupList
  },
  data () {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        slidesPerView: 3,
        slidesPerGroup: 3
        // autoplay: {
	      // delay: 4000
        // }
        // loop : true,
      },
      swiperSlides: [1, 2, 3, 4, 5, 6, 7],
      isContent: false,
      gName: '',
      gSubName: '',
      gAddress: '',
      gTel: '',
      gFax: '',
      gImg: '',
      bText: '',
      branchList: []
    }
  },
  methods: {
    close () {
      this.isContent = false
    },
    findGroupBranch (index) {
      this.isContent = true
      this.gName = groupList[index - 1].name
      this.gSubName = groupList[index - 1].subName
      this.gAddress = groupList[index - 1].address
      this.gTel = groupList[index - 1].tel
      this.gFax = groupList[index - 1].fax
      this.gImg = groupList[index - 1].img
      this.bText = groupList[index - 1].text
	    this.findBranchOfficeById(index)
    },
    findAllBranchOffice () {
      api.findAllBranchOffice()
        .then(res => {
          if (res.code === 200) {
            this.branchList = res.result
	          for (const i in res.result) {
	            this.branchList[i].image = '../../assets/icon/' + res.result[i].image
		          this.branchList[i].name = res.result[i].image.split('/')[0]
	          }
          } else {
            console.log(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    findBranchOfficeById (id) {
      api.findBranchOfficeById(id)
        .then(res => {
          if (res.code === 200) {
            console.log(res)
          } else {
            console.log(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  created () {
    // this.findAllBranchOffice()
  }
}
</script>
<style rel="stylesheet/scss" type="text/scss" lang="scss">
	.j-groupbranch{
		margin-bottom: 80px;
		.container{
			padding: 0;
		}
		.gb-swiper{
			.swiper-slide-list{
				padding: 8px;
				margin-bottom: 50px;
				.gb-box {
					display: block;
					padding: 8px;
					background-color: #f8f8f8;
					cursor: pointer;
					.gb-img{
						position: relative;
						img{
							max-width: 100%;
							vertical-align: middle;
						}
						.gb-mask{
							position: absolute;
							left: 0;
							top: 0;
							bottom: 0;
							right: 0;
						}
					}
					.gb-text{
						color: #000;
						margin: 20px 0 10px 0;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						text-align: center;
					}
				}
			}
		}
		.gb-content-box{
			position: fixed;
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 99999;
			.gb-content-info{
				position: absolute;
				top:50%;
				left: 50%;
				margin-left: -300px;
				margin-top: -185px;
				width: 640px;
				height: 390px;
				background: #fff;
				box-shadow: 0 0 35px rgba(0,0,0,.5);
				border-radius: 5px 5px;
				.colse{
					padding: 10px 12px 0 0;
					text-align: right;
					img{
						cursor: pointer;
					}
				}
				.gb-text{
					text-align: left;
					padding: 0 26px;
					box-sizing: border-box;
					.gb-text-up{
						div{
							display: inline-block;
						}
						.gb-img{
							width: 35%;
							img{
								width: 100%;
							}
						}
						.gb-info{
							width: 61%;
							p{
								margin-bottom: 4px;
								color: #333;
								/*font-size: 14px;*/
							}
							b{
								color: #222;
							}
							.gb-subtt{
								margin-bottom: 8px;
							}
							.gb-suptt{
								font-size: 18px;
								font-weight: 600;
								color: #222;
							}
						}
					}
					.gb-text-down{
						hr{
							border-top: 1px solid #e5e5e5;
							margin: 15px auto;
						}
						p{
							/*font-size: 14px;*/
							color: #333;
							line-height: 24px;
						}
					}
				}
			}
		}
		.swiper-pagination-bullet {
			width: 15px;
			height: 15px;
			display: inline-block;
			border-radius: 100%;
			background: none;
			opacity: 1;
			border: 2px solid #02adef;
		}
		.swiper-pagination-bullet-active {
			opacity: 1;
			background: #02adef;
		}
		.swiper-slide-next + .swiper-slide{
			padding: 8px 0 8px 16px;
		}
		.swiper-slide-active{
			padding: 8px 16px 8px 0!important;
		}
	}
	@media (max-width: 767px){
		.j-groupbranch{
			margin-bottom: 40px!important;
			.container{
				padding: 0 15px!important;
			}
		}
		.j-groupbranch .gb-swiper .swiper-slide-list {
			padding: 5px!important;
			margin-bottom: 50px;
		}
		.gb-swiper{
			.swiper-slide-list{
				padding: 2px;
				margin-bottom: 30px;
				.gb-box {
					padding: 2px!important;
					.gb-text{
						font-size: 13px!important;
						margin: 10px 0 5px 0!important;
						word-wrap : break-word;
					}
				}
			}
		}
		.gb-content-box{
			.gb-content-info{
				margin-left: -47%!important;
				margin-top: -270px!important;
				width: 94%!important;
				height: 540px!important;
				.gb-text{
					padding: 0 15px!important;
					.gb-text-up{
						.gb-info{
							p{
								font-size: 13px!important;
							}
							.gb-suptt{
								font-size: 16px!important;
							}
						}
					}
					.gb-text-down{
						hr{
							margin: 12px auto!important;
						}
						p{
							font-size: 13px!important;
						}
					}
				}
			}
		}
	}
</style>
